<template>
    <div class="box">
        <!-- 标题 -->
        <van-nav-bar title="分类" class="fen" />
        <!-- 头部搜索框 -->
        <div class="ipt">
            <van-icon name="search" class="zi" />
            <input type="text" placeholder="按内容搜索">
        </div>
        <!-- 侧边导航 -->
        <div class="ce1">
            <div class="ce">
                <ul>
                    <li v-for="(item, i) in list" :key="i" @click="bian(i)" :class="idx == i ? 'active' : 'acc'">{{
                        item
                    }}
                    </li>
                </ul>
            </div>
            <div class="cont">
                <div class="tu" v-for="(item, i) in carts" :key="i">
                    <h3>{{ item }}</h3>
                    <div class="pian">
                        <div>
                        <img src="../assets/01.png" @click="xiang(0)">
                        <p>热买爆品</p>
                    </div>
                    <div>
                        <img src="../assets/02s.png" @click="xiang(1)">
                        <p>用品</p>
                    </div>
                    <div>
                        <img src="../assets/03.png" @click="xiang(2)">
                        <p>好礼专区</p>
                    </div>
                    <div>
                        <img src="../assets/04.png" @click="xiang(3)">
                        <p>美容馆</p>
                    </div>
                    <div>
                        <img src="../assets/05.png" @click="xiang(4)">
                        <p>基础护肤</p>
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            idx: 1,
            list: ['本周特惠', '美妆', '酒水', '小家电', '服饰', '鞋靴', '饰品', '箱包', '饰品', '箱包', '家电', '厨卫', '汽配'],
            // 商品
            carts: ['热门精选', '面部护肤', '个护工具'],
        }
    },
    methods: {
        bian(id) {
            this.idx = id
        },
        xiang(a){
            console.log(a);
            this.$router.push('/xiang')
        }
    },
}
</script>
<style lang="scss" scoped>
* {
    padding: 0;
    margin: 0;
}

.box {
    .ce1 {
        width: 100%;
        height: 100%;
        display: flex;

        .ce {
            width: 30%;
            height: 100%;

            // background-color: aqua;
            ul {
                .active {
                    color: #ff6040;
                    font-weight: 900;
                }

                li {
                    list-style: none;
                    height: 41px;
                    line-height: 41px;
                    color: #ccc;

                }
            }
        }

        .cont {
            width: 70%;
            height: 100%;
            background-color: #ccc;

            .tu {
                width: 90%;
                margin-left: 8%;
                margin-top: 10px;
                height: 230px;
                background-color: #fff;
                h3{
                    text-align: left;
                    padding-left: 10px;
                }
                .pian{
                    display: flex;
                    flex-flow:row wrap;
                    justify-content: space-between;
                    div{
                        width: 30%;
                        height: 20%;
                        p{
                            font-size: 10px;
                            text-align: center;
                            padding-bottom: 10px;
                            color: #ccc;
                        }
                        img{
                            width: 80%;
                            height: 80%;
                            margin: 10px 3px;
                        }
                    }
                }
            }
        }
    }

    .fen {
        background-color: #ff6040;
    }

    .ipt {
        width: 100%;
        height: 40px;
        background-color: #ff6040;
        position: relative;

        .zi {
            position: absolute;
            top: 10px;
            left: 15px;
        }

        input {
            margin-top: 5px;
            width: 90%;
            height: 25px;
            border: 0;
            border-radius: 2px;
            padding-left: 25px;
        }
    }
}
</style>